<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工序管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/gy' }">工序列表</el-breadcrumb-item>
      <el-breadcrumb-item>工艺制作</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">


      <el-form :model="searchForm" label-width="70px">
        <el-row :gutter="24">
          <el-col :span="6">图号:{{searchForm.code}}</el-col>
          <el-col :span="12">零件名称:{{searchForm.name}}</el-col>
          <el-col :span="6">数量:{{searchForm.num}}</el-col>
        </el-row>

      </el-form>

      <el-button type="primary" @click="addMaterialList()" :disabled="true">添加原材料</el-button>
      <el-table :data="materialList"
      border
      style="width: 100%">
      <el-table-column
        label="原材料"
        width="180">
        <template slot-scope="scope">
          <el-select v-model="materialList[scope.$index].materialId" placeholder="请选择" @change="count(scope.$index)" :disabled="true">
            <el-option
              v-for="item in materialList2"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="规格"
        width="180">
        <template slot-scope="scope">
          <el-select v-model="materialList[scope.$index].spec" placeholder="请选择活动区域" :disabled="true">
            <el-option label="板" :value="0"></el-option>
            <el-option label="棒" :value="1"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="下料件数">
        <template slot-scope="scope">
          <el-input v-model="materialList[scope.$index].mm" placeholder="请输入内容" @change="count(scope.$index)" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="下料尺寸">
        <template slot-scope="scope">
          <el-input v-model="materialList[scope.$index].bfLength" placeholder="请输入长"v-if="materialList[scope.$index].spec==0" @change="count(scope.$index)" :disabled="true"></el-input>
          <el-input v-model="materialList[scope.$index].bfWidth" placeholder="请输入宽" v-if="materialList[scope.$index].spec==0" @change="count(scope.$index)" :disabled="true"></el-input>
          <el-input v-model="materialList[scope.$index].bfHight" placeholder="请输入高" @change="count(scope.$index)" :disabled="true"></el-input>
          <el-input v-model="materialList[scope.$index].bfDiam" placeholder="请输入直径" v-if="materialList[scope.$index].spec==1" @change="count(scope.$index)" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="产品尺寸">
        <template slot-scope="scope">
          <el-input v-model="materialList[scope.$index].afLength" placeholder="请输入长"v-if="materialList[scope.$index].spec==0" :disabled="true"></el-input>
          <el-input v-model="materialList[scope.$index].afWidth" placeholder="请输入宽" v-if="materialList[scope.$index].spec==0" :disabled="true"></el-input>
          <el-input v-model="materialList[scope.$index].afHight" placeholder="请输入高" :disabled="true"></el-input>
          <el-input v-model="materialList[scope.$index].afDiam" placeholder="请输入直径" v-if="materialList[scope.$index].spec==1" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="产品面积（cm2）">
        <template slot-scope="scope">
          <el-input v-model="materialList[scope.$index].afArea" placeholder="请输入内容" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="产品重量(kg)">
        <template slot-scope="scope">
          <el-input v-model="materialList[scope.$index].afWeight" placeholder="请输入内容" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="delMaterialList(scope.$index)" :disabled="true">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
      <!--间隔-->
      <el-row class="box"></el-row>
      <!--添加工序按钮-->
      <el-row>
        <el-button type="primary" @click="addProcessList()" :disabled="true">添加工序</el-button>
      </el-row>
      <!--工序列表信息-->
      <el-table
        :data="processList"
        border
        style="width: 100%">
        <el-table-column
          label="工序名称">
          <template slot-scope="scope">
            <el-select v-model="processList[scope.$index].processId" placeholder="请选择" :disabled="true">
              <el-option
                v-for="item in processList2"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="准备工时">
          <template slot-scope="scope">
            <el-input v-model="processList[scope.$index].preWorkHour" placeholder="请输入准备工时" :disabled="true"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="单件时间">
          <template slot-scope="scope">
            <el-input v-model="processList[scope.$index].sgWorkHour" placeholder="请输入单价时间" :disabled="true"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="delProcessList(scope.$index)" :disabled="true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--间隔-->
      <el-row class="box"></el-row>
      <el-row class="box"></el-row>
      <!--按钮-->
      <div align="right">
        <el-row>
          <el-button type="primary" @click="offer()">确定</el-button>
          <el-button type="primary" @click="call()">取消</el-button>
        </el-row>
      </div>
     

    </el-card>
  </div>
</template>

<script>
  export default {
    name: "LookDetail",
    data(){
      return{
        searchForm:{},
        addMateria:[],
        addDrocess:[],
        materialList:[],
        materialList2:[],
        num:[],
        dd:null,
        price:null,
        processList:[],
        processList2:[],
        materialAndProcess:{
          item:{},
          material:[],
          process:[]
        }

      }
    },
    methods:{
      // //添加行
      // addMaterialList:function () {
      //   var orderItemId=this.$route.query.id;
      //   this.materialList.push({afLength:null,afWidth:null,afHight:null,afDiam:null,afWeight:null,materCost:null,orderItemId:orderItemId})
      //   debugger;
      //   this.num.push({mm:null})
      // },
      // //删除原材料行
      // delMaterialList:function (index) {
      //   this.materialList.splice(index,1)
      //   this.num.splice(index,1)
      // },
      //添加工序行
      // addProcessList:function () {
      //   var orderItemId=this.$route.query.id;
      //   this.processList.push({orderItemId:orderItemId})
      // },
      // //删除工序行
      // delProcessList:function (index) {
      //   this.processList.splice(index,1)
      // },
      //查询零件对象
      searchOrderItem:function (id) {
        this.$http.get("/orderItem/getOrderItemList/"+id).then((res)=>{
          this.searchForm = res.data.result;
        })
      },
      //查询所有原材料
      getMaterialList2:function () {
        this.$http.get("/material/materialList").then((val)=>{
          this.materialList2 = val.data.result
        })
      },
      // count:function (index) {
      //   this.$http.get("/material/getById/"+this.materialList[index].materialId).then((res)=>{
      //     this.dd = res.data.result.density
      //     this.price = res.data.result.price
      //   })
      //   let spec=this.materialList[index].spec
      //   let mm=this.num[index].mm;
      //   let bfLength = this.materialList[index].bfLength
      //   let bfWidth = this.materialList[index].bfWidth
      //   let bfHight = this.materialList[index].bfHight
      //   let bfDiam = this.materialList[index].bfDiam
      //   if(spec==0){
      //     if(mm!=null && bfLength!=null && bfWidth!=null && bfHight!=null){
      //       this.materialList[index].afLength = bfLength
      //       this.materialList[index].afWidth = bfWidth
      //       this.materialList[index].afHight = bfHight*mm/this.searchForm.num
      //       this.materialList[index].afArea=(((bfLength*bfWidth)+(bfLength*this.materialList[index].afHight)+(bfWidth*this.materialList[index].afHight))*2).toFixed(4)
      //       this.materialList[index].afWeight=bfLength*bfWidth*this.materialList[index].afHight*this.dd/1000000
      //       this.materialList[index].materCost=(this.materialList[index].afWeight*this.price).toFixed(2);
      //     }
      //   }else{
      //     if(mm!=null && bfHight!=null && bfDiam!=null){
      //       this.materialList[index].afHight=bfHight*mm/this.searchForm.num;
      //       this.materialList[index].afDiam=bfDiam;
      //       this.materialList[index].afArea=((bfDiam/2*bfDiam/2*3.14*2/100)+(bfDiam*3.14*this.materialList[index].afHight/100)).toFixed(4)
      //       this.materialList[index].afWeight=(((bfDiam/2*bfDiam/2*3.14/100)*this.materialList[index].afHight/10*this.dd)/1000).toFixed(4)
      //       this.materialList[index].materCost=(this.materialList[index].afWeight*this.price).toFixed(2);
      //     }
      //   }
      // },
      getProcessLists:function () {
        this.$http.get("/process/processList").then((res)=>{
          debugger;
          this.processList2 = res.data.result
        })
      },
      // offer:function () {
      //   this.materialList.orderItemId=13;
      //   this.processList.orderItemId=13;
      //   this.$http.post("/order-material/saveGy",{materialList:this.materialList,processList:this.processList}).then((val)=>{
      //     if (val.data.success) {
      //       this.$message.success(val.data.message);
      //       this.$router.push("/gy")
      //     }else{
      //       this.$message.error(val.data.message);
      //     }
      //   })
      // },
      call:function () {
        this.$router.push("/gy")
      },
      //回显
      lookOrdPro:function (id) {

        this.$http.get("/order-material/getOrdPro/"+id).then((res)=>{
          debugger;
         this.materialList=res.data.result.materialList;
         this.processList=res.data.result.processList;
        })
      }
    },
    mounted() {
      var orderItemId=this.$route.query.id;
      this.searchOrderItem(orderItemId)
      this.getMaterialList2();
      this.getProcessLists();
      this.lookOrdPro(orderItemId);
    },

  }
</script>

<style scoped>

</style>
